<template>
    <div id='forget-view2'>
            <!-- 主要这个页面  以后可以在这个页面改 -->
            <header class="index-header">
                    <div class="index-header__company">
                        <div class='text'>
                            <p >
                                <i class="el-icon-upload" style='font-size:30px;'></i>
                                放款人管理平台
                            </p>
                        </div>
                    </div>
                    <div class="index-header__user">
                        <p class='logout' >
                            <div class="index-header__user">
                                <p class='logout' @click='getOut'>
                                    <i class='el-icon-d-arrow-left'></i>
                                    退出
                                </p>
                            </div>
                        </p>
                    </div>               
            </header>
            <div class='host-bar'>
                <nav class='flex-bar' v-for='item in addForm'>
                    <div class='flex-div' v-for='subitem in item'>
                        <i :class="subitem.icon"></i>
                        <a class='flex-hover' @click="goRouter(subitem.subRouters,'sub')">{{subitem.name}}</a>   
                    </div>
                    <!-- <div class='flex-div'>
                        <a class='flex-hover' @click='goOut1()'>222</a>   
                    </div> -->
                  
                 </nav>
                <div class='content-type'>
                    <transition name='router' mode="out-in">
                            <router-view ></router-view>
                    </transition>
                </div>
            </div>
            
           
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import { getOS } from '../utils/utils'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import checkBox from '../components/CheckBox.vue'
    import checkBoxGroup from '../components/CheckBoxGroup.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import  {mapGetters, mapActions}  from 'vuex'
    import {addLenderValidation, resetAccountPasswordValidation, operatorEditValidation} from '../validation/validation'
    import {loginApi,allApi} from '../api/api'
    import moment from 'moment'
    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            tabBox,
            tab,
            radio,
            checkBox,
            checkBoxGroup,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker,
            // AreaSelect
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setMsgTipStyle',
                'setSessionId',
                'localInfo'
            ]),
            // 退出接口
            userLogOut(){
                loginApi.userLogOut({})
                .then(result=>{
                    console.log(result)
                })
                .catch(error => {
                    console.error(error)
                })
            },
            // 退出
            getOut(){
                this.setSessionId('')
                // user/logout
                // this.userLogOut()
                this.$router.push({
                        name:'login'
                   })
            },
            goRouter(item,isSub){
                console.log(item,isSub)
                if(isSub === 'sub'){
                    this.$router.push({
                        name:item
                    })
                }
            },
            // list
            listAll(){
                allApi.list()
                .then(result =>{
                    this.resultListform=result
                    // this.addForm[0]=this.resultListform
                     let msg={
                            createTime:1505393790000,
                            enable:1,
                            icon:'el-icon-date',
                            id:14,
                            name:"渠道商管理",
                            router:"channel",
                            subRouters:"channel-management"
                        }
                         let msg1={
                            createTime:1505393790000,
                            enable:1,
                            icon:'el-icon-search',
                            id:14,
                            name:"渠道号查询",
                            router:"channel",
                            subRouters:"channel-inquiry"
                        }
                    this.resultListform.push(msg)
                    this.resultListform.push(msg1)
                    console.log(this.resultListform)
                    this.$set(this.addForm,0,this.resultListform)
                })
                .catch(error =>{

                })
            }
   
        },
        data() {
            return {
                addForm:[],
                resultListform:[],
                // sideBarList:[
                //     [{
                //     text:'概括',
                //     router:'user',
                //     icon:'el-icon-upload',
                //     opened:false,
                //     subRouters:[{
                //         name:'user-index'
                //          }],
                //      },
                //      {
                //     text:'放款人管理',
                //     icon:'el-icon-date',
                //     router:'transition',
                //     opened:false,
                //     subRouters:[{
                //         name:'transition-index'
                //          }],
                //      },
                //      {
                //     text:'求借需求',
                //     icon:'el-icon-menu',
                //     router:'borrow',
                //     opened:false,
                //     subRouters:[{
                //         name:'borrow-index'
                //          }],
                //      },
                //      {
                //     text:'求借需求订单',
                //     icon:'el-icon-view',
                //     router:'admin',
                //     opened:false,
                //     subRouters:[{
                //         name:'admin-index'
                //          }],
                //      },
                //      {
                //     text:'价格配置',
                //     icon:'el-icon-setting',
                //     router:'guest',
                //     // opened:false,
                //     subRouters:[{
                //         name:'guest-index'
                //          }],
                //      },
                //      {
                //     text:'拓展经理',
                //     icon:'el-icon-plus',
                //     router:'order',
                //     opened:false,
                //     subRouters:[{
                //         name:'order-index'
                //          }],
                //      },
                //      {
                //     text:'放款人入驻管理',
                //     icon:'el-icon-share',
                //     router:'finnace',
                //     opened:false,
                //     subRouters:[{
                //         name:'finnace-index'
                //          }],
                //      },
                //      {
                //     text:'充值记录',
                //     icon:'el-icon-document',
                //     router:'charge',
                //     opened:false,
                //     subRouters:[{
                //         name:'charge-index'
                //          }],
                //      },
                //     {
                //     text:'出借管理',
                //     icon:'el-icon-search',
                //     router:'customers',
                //     opened:false,
                //     subRouters:[{
                //         name:'customers-index'
                //          }],
                //      },
                //      {
                //     text:'进件申请订单',
                //     icon:'el-icon-message',
                //     router:'entryapply',
                //     opened:false,
                //     subRouters:[{
                //         name:'entryapply-index'
                //          }],
                //      },
                //      {
                //     text:'进件申请记录',
                //     icon:'el-icon-document',
                //     router:'entryapplyone',
                //     opened:false,
                //     subRouters:[{
                //         name:'entryapplyone-index'
                //          }],
                //      },
                //      {
                //     text:'运营管理',
                //     icon:'el-icon-edit',
                //     router:'yunyingmanager',
                //     opened:false,
                //     subRouters:[{
                //         name:'yunyingmanager-index'
                //          }],
                //      },
                //      {
                //     text:'借条管理',
                //     icon:'el-icon-date',
                //     router:'',
                //     opened:false,
                //     subRouters:[{
                //         name:''
                //          }],
                //      },
                    

                //      ]
                // ]
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                // 'localInfo',
            ])
        },
        created(){
            this.listAll()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    $fark-flex:#00b1b3;
    $light-flex:#757575;
    #forget-view2{
        .content-type {
            padding-left: 280px;
            // overflow: hidden;
        }
        nav.flex-bar {
            background: #eee;
            height: 100%;
            position: fixed;
            // overflow: hidden;
        }
        .content-type{
            flex-grow:2;
            // background: white;    
        }
        .host-bar{
            margin: 70px 0;
            display: flex;
            height: 1000px;
        }
        .flex-hover{
            cursor: pointer;
            color: $light-flex;
            &:hover{
               color:$fark-flex;
          }
        }
        .flex-div{
            width: 199px;
            height: 45px;
            border: 1px dashed #ddd;
            border-left-color: transparent;
            border-right-color: transparent;
            border-top-color: transparent;
            line-height: 35px;
            padding-left: 35px;
            // border-right-color: transparent;
            // border-left-color: transparent;
            // overflow: auto;
            margin: 10px 0px;
        }
        .icon-triangle{
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 20px solid black; 
                position: absolute;
                top:20%;
                right: 10%;
        }        
        .index-header{
            display:flex;
            justify-content:space-between;
            align-items:center;
            background-color: #00b1b3;
            color:#fff;
            height: 70px;
            position: fixed;
            width: 100%;
            z-index: 111;
        }
        .index-header__company{
            display:flex;
            align-items:center;
            .logo{
                margin:16px 18px 16px 40px;
                width: 48px;
                height:48px;
            }
            .text{
                p{
                    margin:16px 18px 16px 40px;
                    font-size: 20px;
                    line-height:48px;
                    cursor: pointer;
                }
                p:hover{
                    background-color: rgba(6, 7, 7, 0.1);
                    transition: all .5s;
                }
                span{
                    font-size: 13px;
                    color:$dark;
                }
            }
        }
        .index-header__user{
            display:flex;
            align-items:center;
            padding-right: 36px;
            .iconfont{
                display: block;
                font-size: 15px;
                width: 15px;
                height:15px;
                padding:2px;
                // border:1px solid #fff;
                border-radius:50%;
            }
            .name{
                padding-left:10px;
                padding-right: 20px;
                i{
                    color:#fff;
                }
            }
            .logout{
                padding-left: 20px;
                position: relative;
                color:#fff;
                cursor:pointer;
                &:before{
                    content:'';
                    position: absolute;
                    left:0;
                    top:50%;
                    height:100%;
                    transform:translate(0,-50%);
                }
            }
            .releative{
                position: relative;
            }
        }
    }
</style>
